<template>
  <div class="container">
    <div class="app-container">
      <div class="left">
        <el-container>
          <el-input
            v-model="selectionInputContent"
            style="margin-bottom:10px width:320px;"
            type="text"
            size="small"
            placeholder="输入选调事项名称"
            v-if="visibl()"
          />
          <el-button 
            @click="addSelection"
            style="background-color: cornflowerblue; color: black;"
            type="button"
            size="small"
            v-if="visibl()"
          >添加</el-button>
        </el-container>
        <el-table
          ref="selTable"
          :data="selectionList"
          highlight-current-row
          @current-change="selectNode"
          :cell-style="cellStyle"
          height="500px"
          >
          <el-table-column
            property="selectionName"
            label="事项名称"
            width="150px">
          </el-table-column>
          <el-table-column
            property="departmentName"
            label="创建部门"
            width="150px">
          </el-table-column>
          <el-table-column
            property="createTime"
            label="创建时间"
            width="160px">
          </el-table-column>     
        </el-table>
      </div>
      <div class="right">
        <el-row class="opeate-tools" type="flex" justify="start">
          <el-button size="mini" @click="chooseT" v-if="visibl()">添加模板</el-button>
          <el-button size="mini" @click="showPdfDialog = true" v-if="visibl()">上传pdf文件</el-button>
          <el-button size="mini" @click="disSelection" v-if="visibl()">分发</el-button>
          <el-button size="mini" @click="showZipDialog = true" v-if="visible()">上传压缩文件</el-button>
        </el-row>
        <!-- 表格组件 -->
          <el-table :data="templateMap" height="590px">
          <!-- header -->
          <el-table-column
            property="name"
            label="模版列表"
            width="350px">
          </el-table-column>
          <!-- body部分 -->
          <el-table-column label="操作" width="280px" fixed="right">
            <template v-slot="{ row }">
              <el-button slot="reference" style="margin-left:10px" type="text" @click="downTemplate(row.id)" v-if="visible()">下载文件</el-button>
              <el-popconfirm
                title="确认删除该行数据吗？"
                @onConfirm="delTem(row.id)"
              >
                <el-button slot="reference" style="margin-left:10px" type="text" v-if="visibl()">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
          <!-- body部分 -->
          </el-table>
          <add-template 
            ref="getT"
            :show-add-template-dialog.sync="showAddTemplateDialog" 
            @alertInfo="alertInfo" 
            />
            <import-pdf :show-pdf-dialog.sync="showPdfDialog" @uploadSuccess="alInfo" />
            <dis-sel
            ref="disSel"
            :show-dis-sel-dialog.sync="showDisSelDialog" 
            @ao="alertInfoo" 
            />
            <import-zip :show-zip-dialog.sync="showZipDialog" @uploadSuccess="resZipInfo" />
      </div>
    </div>
  </div>
</template>
<script>
import { getSelection, addSelection, getTemplateL, getFileName, downTemplate, delTemp } from '@/api/employee'
import AddTemplate from './components/add-template.vue'
import ImportPdf from './components/import-pdf.vue'
import DisSel from './components/dis-sel.vue'
import ImportZip from './components/import-zip.vue'
import store from '@/store'
import FileSaver from 'file-saver'
export default {
  name: 'Attendance',
  components: {
    AddTemplate,
    ImportPdf,
    DisSel,
    ImportZip
  },
  data() {
    return {
      selectionId: '',
      selectionList: [],
      selectionInputContent: '', // 选调事项名称
      templateMap: [],
      showAddTemplateDialog: false,
      showPdfDialog: false,
      showDisSelDialog: false,
      showZipDialog: false
    }
  },
  created() {
    this.getSelection()
  },
  methods: {
    async getSelection() {
      const param = {
        levelId: store.getters.levelId,
        departmentId: store.getters.departmentId
      }
      const data = await getSelection(param)
      this.selectionList = data
      this.selectionId = this.selectionList[0].id
      //this.getTemplateL()
      this.$nextTick(() => {
        const firstRowOfFirstTable = this.$refs.selTable.$el.querySelector('.el-table__body tbody tr');
        if (firstRowOfFirstTable) {
          firstRowOfFirstTable.click(); // 模拟点击第一行
        }
      });
    },
    async getTemplateL() {
      this.templateMap = await getTemplateL(this.selectionId)
    },
    async addSelection() {
      if (!this.selectionInputContent) {
        this.$message.error('请输入选调事项名称！')
        return
      }
      const data = {
        departmentName: store.getters.name,
        selectionName: this.selectionInputContent
      }
      await addSelection(data)
      this.selectionInputContent = ''
      this.getSelection()
    },
    selectNode(node) {
      this.selectionId = node.id
      this.getTemplateL()
    },
    cellStyle() {
      return "cursor:pointer;"
    },
    alertInfo() {
      this.getTemplateL()
      this.$message.success('添加成功！')
    },
    alertInfoo() {
      this.$message.success('分发成功！')
    },
    chooseT() {
      this.showAddTemplateDialog = true
      this.$refs.getT.getNames()
    },
    disSelection() {
      this.showDisSelDialog = true
      this.$refs.disSel.getNames()
    },
    alInfo() {
      this.$message.success('文件上传成功！')
    }, 
    async downTemplate(id) {
      const name = await getFileName(id)
      const data = await downTemplate(id)
      FileSaver.saveAs(data,name)
    },
    async delTem(id) {
      await delTemp(id)
      this.getTemplateL()
    },
    resZipInfo() {
      this.$message.success('文件上传成功！')
    },
    visible() {
      if (store.getters.levelId === 1) {
        return false
      }
      return true
    },
    visibl() {
      if (store.getters.levelId === 1) {
        return true
      }
      return false
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  background: #fff;
  display: flex;
  .left {
    width: 320px;
    padding: 20px;
    border-right: 1px solid #eaeef4;
  }
  .right {
    flex: 1;
    padding: 20px;
    .opeate-tools {
      margin:10px ;
    }
    .opeate-tools > .el-button {
      border-radius: 5px;
      border-color: rgb(55, 55, 55);
      color: rgb(35, 35, 35);
    }
  }
}
</style>